<!DOCTYPE html>
<html>
<head>
	<title></title>
	<!--[if lt IE 9]>
	<meta http-equiv="refresh" content="0;ie.html" />
	<![endif]-->

	<link rel="shortcut icon" href="__STATIC__/layout/favicon.ico"> <link href="__STATIC__/layout/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
	<link href="__STATIC__/layout/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
	<link href="__STATIC__/layout/css/animate.css" rel="stylesheet">
	<link href="__STATIC__/layout/css/style.css?v=4.1.0" rel="stylesheet">
	 <link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">
	<link href="__STATIC__/layout/css/channel.css?v=4.1.0" rel="stylesheet">
	<script src="__STATIC__/layout/js/jquery.min.js"></script>
	<!-- Sweet Alert -->
	<link href="__STATIC__/layout/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
	<!-- Sweet alert -->
	<script src="__STATIC__/layout/js/plugins/sweetalert/sweetalert.min.js"></script>
	<!-- layer javascript -->
	<script src="__STATIC__/layout/js/plugins/layer/layer.min.js"></script>

	<script src="__STATIC__/layout/js/plugins/suggest/bootstrap-suggest.min.js"></script>
	<style>
		.renyuan{
			position:absolute;left:0;top:26px;
			z-index:3;
		}
		.renyuan span.ren{
			display: inline-block;
			background:#d0e0e0;border:1px solid #ccc;border-radius:5px;font-size:12px;
		}
		.renyuan span.close{
			 font-size: 16px;
    			margin-left: 4px;
			color:black!important;
		}
	</style>
</head>
<body class="gray-bg">
<div class="ibox">
			<div class="ibox-content">
				<form role="form" id="formadd" method="post" action="{:url('update')}">
					<input type="hidden" name="id" id="idx" value="{$data.id}">
				<div class="row form-group" style="margin-bottom: 25px;">
					<label class="col-xs-3 control-label">省份名称</label>
					<div class="col-xs-9">
						<input name="title" id="title" type="text" placeholder="省份名称" class="form-control" value="{$data.title}">
					</div>
				</div>
				<div class="row form-group" style="margin-bottom: 25px;">
					<label class="col-xs-3 control-label">省份负责人</label>
					<div class="col-xs-7">
						<div class="input-group">
							<input name="head" id="testNoBtn" type="text" placeholder="省份负责人" class="form-control" value="">
							<div class="input-group-btn">
								<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
									<span class="caret"></span>
								</button>
								<ul class="dropdown-menu dropdown-menu-right" role="menu">
								</ul>
							</div>
							<div class="renyuan" id="renyuan">
								{if isset($data.head)}
								<span class="ren" data-id="{$data.head}">{$data.em_name}<span class="close">×</span></span>
								{/if}
							</div>
						</div>
					</div>
					<div class="col-xs-2">
						<a href="javascript:;" class="btn btn-default" id="select">选择</a>
					</div>
				</div>
				<div class="row form-group" style="margin-bottom: 25px;">
					<label class="col-xs-3 control-label">所属分区</label>
					<div class="col-xs-9">
						<select name="zoning" id="zoning" class="form-control select">
							<option value="">请选择</option>
							{volist name="fenqu" id="row"}
							<option value="{$row.id}" {if $row.id==$data.zoning}selected{/if}>{$row.title}</option>
							{/volist}
						</select>
					</div>
				</div>
					<div class="row form-group" style="margin-bottom: 25px;">
						<label class="col-xs-3 control-label">所属省份</label>
						<div class="col-xs-9">
							<select name="provice" id="provice" class="form-control">
								<option value="">请选择</option>
								{volist name="shengfen" id="row"}
								<option value="{$row.id}" {if $row.id==$data.provice}selected{/if}>{$row.title}</option>
								{/volist}
							</select>
						</div>
					</div>
					<script>
                        $(function () {
                            $('#zoning').on('change',function () {
                                var id = $(this).val()
                                $('#provice').load('{:url("getprovices")}?id='+id)
                            })
                        })
					</script>
				<div class="row form-group" style="margin-bottom: 25px;">
					<label class="col-xs-3 control-label">省份管理人员</label>
					<div class="col-xs-7">
						<div class="input-group">
							<input name="admin" id="testNoBtn2" type="text" placeholder="省份管理人员" class="form-control" value="">
							<div class="input-group-btn">
								<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
									<span class="caret"></span>
								</button>
								<ul class="dropdown-menu dropdown-menu-right" role="menu">
								</ul>
							</div>
							<div class="renyuan" id="renyuan2">
								{if isset($data.admins)}
								{volist name="data.admins" id="row"}
								<span class="ren" data-id="{$row.id}">{$row.em_name}<span class="close">×</span></span>
								{/volist}
								{/if}
							</div>
						</div>
					</div>
					<div class="col-xs-2">
						<a href="javascript:;" class="btn btn-default" id="select2">选择</a>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-12" style="text-align: center;padding-top:10px ">
						<input class="btn btn-sm btn-primary" type="submit" id="tijiao" value="提 交">

					</div>
				</div>
			</form>
		</div>

</div>

</body>
</html>
<script>
    $(function () {
        $('body').on('click','.renyuan span.close',function () {
			$(this).parent('.ren').remove();
        })
		//提交
        $('body').on('click','#tijiao',function () {
            var id = $('#idx').val()
            var form =  $('#formadd')
            var title =  $('#title').val()
            var zoning =  $('#zoning').val()
            var provice =  $('#provice').val()
			var head = typeof $('#renyuan .ren').data('id') != 'undefined'?$('#renyuan .ren').data('id'):''
			var admin = []
            $('#renyuan2 .ren').each(function (idx,o) {
				admin.push($(o).data('id'))
            })
			var admin2 = ''
			if(admin)
            	admin2 = admin.join(',')
            $.ajax({
                'type':'post',
                'url':form.attr('action'),
                'data':{title:title,head:head,admin:admin2,id:id,zoning:zoning,provice:provice},
                'dataType':'json',
                'success':function (data) {
                    if(data.success){
                        swal({
                            title: data.msg,
                            type: "success"
                        },function(){
                            parent.location.reload()
						});

                    }else
                        swal({
                            title: data.msg,
                            type: "warning"
                        });
                }
            })
			return false
        })

        /**
         * 测试(首次从 URL 获取数据，显示 header，不显示按钮，忽略大小写，可清除)
         */
        $("#testNoBtn").bsSuggest({
            url: "{:url('provicejson')}",
            /*effectiveFields: ["userName", "shortAccount"],
            searchFields: [ "shortAccount"],*/
            effectiveFieldsAlias:{userName: "姓名"},
            ignorecase: true,
            showHeader: true,
            showBtn: false,     //不显示下拉按钮
            delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
            idField: "id",
            keyField: "title",
            clearable: true
        }).on('onDataRequestSuccess', function (e, result) {
            console.log('onDataRequestSuccess: ', result);
        }).on('onSetSelectValue', function (e, keyword, data) {
            $(this).val('')
            $('#renyuan').html('<span class="ren" data-id="'+keyword.id+'">'+keyword.key+'<span class="close">×</span></span>')
            //console.log('onSetSelectValue: ', keyword, data);
        }).on('onUnsetSelectValue', function () {
            console.log("onUnsetSelectValue");
        });
        /**
         * 测试(首次从 URL 获取数据，显示 header，不显示按钮，忽略大小写，可清除)
         */
        $("#testNoBtn2").bsSuggest({
            url: "{:url('provicejson')}",
            /*effectiveFields: ["userName", "shortAccount"],
            searchFields: [ "shortAccount"],*/
            effectiveFieldsAlias:{userName: "姓名"},
            ignorecase: true,
            showHeader: true,
            showBtn: false,     //不显示下拉按钮
            delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
            idField: "id",
            keyField: "title",
            clearable: true
        }).on('onDataRequestSuccess', function (e, result) {
            console.log('onDataRequestSuccess: ', result);
        }).on('onSetSelectValue', function (e, keyword, data) {
//            console.log('onSetSelectValue: ', keyword, data);
            $(this).val('')
			var bool = false
			$('#renyuan2 .ren').each(function (idx,o) {
				if($(this).data('id') == keyword.id){
				    bool = true;
				}
            })
			if(bool == false)
            	$('#renyuan2').append('<span class="ren" data-id="'+keyword.id+'">'+keyword.key+'<span class="close">×</span></span>')
        }).on('onUnsetSelectValue', function () {
            console.log("onUnsetSelectValue");
        });

//        选择分区负责人
        $('#select').on('click',function () {
            var index = parent.layer.getFrameIndex(window.name)
            //iframe层-父子操作
            parent.layer.open({
                type: 2,
                title: '请选择分区负责人',
                area: ['500px', '400px'],
                fixed: false, //不固定
                maxmin: true,
                content: '{:url("selecthead")}?frameindex='+index
            });
            return false

        })

//        选择管理人员
        $('#select2').on('click',function () {
            var index = parent.layer.getFrameIndex(window.name)
            //iframe层-父子操作
            parent.layer.open({
                type: 2,
                title: '请选择分区管理人员',
                area: ['500px', '400px'],
                fixed: false, //不固定
                maxmin: true,
                content: '{:url("selectadmin")}?frameindex='+index
            });
            return false

        })

    })
</script>